<script setup>
import { BaseEdge, EdgeLabelRenderer, useVueFlow, getBezierPath } from "@vue-flow/core";
import { computed } from "vue";

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  sourceX: {
    type: Number,
    required: true
  },
  sourceY: {
    type: Number,
    required: true
  },
  targetX: {
    type: Number,
    required: true
  },
  targetY: {
    type: Number,
    required: true
  },
  sourcePosition: {
    type: String,
    required: true
  },
  targetPosition: {
    type: String,
    required: true
  },
  markerEnd: {
    type: String,
    required: false
  },
  style: {
    type: Object,
    required: false
  }
});

const { removeEdges } = useVueFlow();

// const path = computed(() => {
//   const { sourceX, sourceY, targetX, targetY } = props;
//   const midX = (sourceX + targetX) / 2;
//   const midY = (sourceY + targetY) / 2;
//   const d = `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
//   return [d, midX, midY];
// });
const path = computed(() => getBezierPath(props));
</script>

<script>
export default {
  inheritAttrs: false
};
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />

  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
      }"
      class="nodrag nopan"
    >
      <button class="edgebutton" @click="removeEdges(id)">×</button>
    </div>
  </EdgeLabelRenderer>
</template>
<style scoped>
.edgebutton {
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: green;
  font-size: large;
}

.edgebutton:hover {
  transform: scale(1.1);
  transition: all ease 0.5s;
  box-shadow: 0 0 0 2px #10b98180, 0 0 0 4px #10b981;
}
</style>
